<template>
    <div class="classical-layout">
        <div class="classical-layout-top">
            <slot name="logo"></slot>
            <slot name="header"></slot>
        </div>
        <div class="classical-layout-bottom">
            <div class="menu-wrap" :class="leftClass">
                <slot name="menu"></slot>
            </div>
            <div class="bottom-right" :class="rightClass">
                <div class="tab-wrap">
                    <slot name="tab"></slot>
                </div>
                <div class="content-wrap">
                    <slot name="content"></slot>
                </div>
                <div class="fotter-wrap">
                    <slot name="fotter"></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { isCollapse } from "@/store/pinia";
import { computed } from "@vue/runtime-core";
const rightClass = computed(() => {
    return isCollapse().isCollapse ? 'unfold' : 'fold'
})
const leftClass = computed(() => {
    return isCollapse().isCollapse ? 'left_unfold' : ''
})
</script>
<style lang="scss">
.classical-layout {
    width: 100%;
    height: 100%;
    position: relative;

    .logoBox>.logoWrap {
        background-color: #fff;
        border-bottom-color:rgba(0, 0, 0, 0.2);
        border-right: none;
        
        span {
            color: rgb(51, 51, 51);
        }
    }

    .unfold {
        width: calc(100% - 64px) !important;
        transition: all .3s;
    }

    .fold {
        transition: all .3s;
    }

    .left_unfold {
        width: 64px !important;
        transition: all .3s;
    }

    .classical-layout-top {
        width: 100%;
        height: 55px;
        display: flex;
    }

    .classical-layout-bottom {
        width: 100%;
        height: calc(100% - 55px);
        display: flex;

        // transition: width .3s;
        // background-color: var(--horizontal-header-bgcolor);
        .menu-wrap {
            // height: 100%;
            width: 210px;
            transition: width .3s;
            .el-menu {
                height: 100%;
                width: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
                background-color: var(--horizontal-header-bgcolor) !important;
            }
        }

        >.bottom-right {
            width: calc(100% - 210px);
            height: 100%;
            background-color: #f0f2f5;
        }

        .header-wrap,
        .tab-warp,
        .content-wrap,
        .fotter-wrap {
            width: 100%;
        }

        .fotter-wrap {
            height: 30px;
            transition: all .3s;
        }

        .tab-wrap {
            height: 40px;

            .el-tabs {
                background-color: #fff;
            }
        }

        .content-wrap {
            height: calc(100% - 70px);
            // display: flex;
            // justify-content: center;
            // align-items: center;
            background-color: #f0f2f5;
        }
    }

    .left .el-menu {
        width: 100%;
        height: calc(100% - 55px);
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: var(--horizontal-header-bgcolor) !important;
    }

    .left .is-active::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        content: "";
        background: var(--isActive-color);
    }

    .left .is-opened::before,
    .left .el-sub-menu::before {
        content: "";
        width: 0px;
    }
}</style>